<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js page-typography page-sidebar-right"> <!--<![endif]-->

<!-- Mirrored from dbooom.com/themes/html/manifest/features/typography.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 04 Apr 2011 01:52:51 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8"><!-- /Added by HTTrack -->
<head>
    <meta charset="UTF-8">

    <!-- Page title -->
    <title>Manifest - Typography</title>

    <!-- Meta tags -->
    <meta name="description" content="Manifest - premium template." />
    <meta name="author" content="dbooom.com" />

    <!-- Set the viewport to the device's width -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Page icons -->
    <link rel="shortcut icon" href="../favicon.ico" />
    <link rel="apple-touch-icon" href="../apple-touch-icon.png" />

    <!-- Stylesheets -->
    <link rel="stylesheet" href="../styles/styles.css" />
    
    <!-- Other scripts files located at the bottom of the page -->
    <script src="../scripts/modernizr-1.6.min.js"></script>
</head>
<body class="page-typography page-sidebar-right">
    <!-- JS notice - We'll show it if js is disabled -->
    <p id="jsnotice">Javascript is currently disabled. This site requires Javascript to function correctly. Please <a href="http://enable-javascript.com/"> enable Javascript in your browser</a>!</p>
    <!-- /JS notice -->

    <!-- Header -->
    <header id="page-header">
        <!-- Site name + slogan -->
        <hgroup>
            <h1 id="site-name"><a href="index.html" title="Manifest template frontpage">Manifest template</a></h1>
            <h2 id="site-slogan">Clean, elegant, modern, premium template with rich list of features.</h2>
        </hgroup>
        <!-- /Site name + slogan -->

        <!-- Site navigation wrapper -->
        <div class="navigation-wrapper">
            <!-- Header navigation -->
            <nav id="header-navigation">
                <ul>
                    <li><a href="../index-2.html" title="Frontpage">Home</a>
                        <ul class="subnav">
                            <li><a href="../index-2.html" title="Nivo Slider">Nivo Slider</a></li>
                            <li><a href="../index-3d.html" title="3D Slider">3D Slider</a></li>
                        </ul>
                    </li>

                    <li><a href="#" title="Pages">Pages</a>
                        <ul class="subnav">
                            <li><a href="../sidebar-left.html" title="Page with left sidebar">Page with left sidebar</a></li>
                            <li><a href="../sidebar-right.html" title="Page with right sidebar">Page with right sidebar</a></li>
                            <li><a href="../full-width.html" title="Full width page">Full width page</a></li>
                            <li><a href="../team.html" title="Our team">Our team</a></li>
                            <li><a href="../404.html" title="Not found page">404 Page</a></li>
                        </ul>
                    </li>

                    <li><a href="#" title="Template features">Features</a>
                        <!-- Subnavigation first level -->
                        <ul class="subnav">
                            <li><a href="typography.html" title="Typography elements">Typography</a></li>
                            <li><a href="elements.html" title="Boxes and elements">Boxes and elements</a></li>
                            <li><a href="tabs.html" title="Tabs & Toggles">Tabs & Toggles</a></li>
                            <li><a href="media.html" title="Media">Media</a></li>
                            <li><a href="columns.html" title="Columns">Columns</a></li>
                            <li><a href="widgets.html" title="Widgets library">Widgets</a></li>
                            <li><a href="#" class="with-subnav" title="Skins">Predefined skins</a>
                                <!-- Subnavigation second level -->
                                <ul class="subnav">
                                    <li><a href="skins/blog-post-1.html" title="Skin 1">Skin 1</a></li>
                                    <li><a href="skins/blog-post-2.html" title="Skin 2">Skin 2</a></li>
                                    <li><a href="skins/blog-post-3.html" title="Skin 3">Skin 3</a></li>
                                    <li><a href="skins/blog-post-4.html" title="Skin 4">Skin 4</a></li>
                                    <li><a href="skins/blog-post-5.html" title="Skin 5">Skin 5</a></li>
                                </ul>
                                <!-- /Subnavigation second level -->
                            </li>
                            <li class="last"><a href="#" class="with-subnav" title="Second level navigation test">Dropdown 2rd level</a>
                                <!-- Subnavigation second level -->
                                <ul class="subnav">
                                    <li><a href="#" title="Second level dummy">Second level dummy</a></li>
                                    <li><a href="#" title="Second level dummy">Second level dummy</a></li>
                                    <li><a href="#" title="Second level dummy">Second level dummy</a></li>
                                    <li><a href="#" title="Second level dummy">Second level dummy</a></li>
                                    <li class="last"><a class="with-subnav" href="#" title="Second level dummy">Dropdown 3rd level</a>
                                        <!-- Subnavigation third level -->
                                        <ul class="subnav">
                                            <li><a href="#" title="Third level dummy">Third level dummy</a></li>
                                            <li><a href="#" title="Third level dummy">Third level dummy</a></li>
                                            <li class="last"><a href="#" title="Third level dummy">Third level dummy</a></li>
                                        </ul>
                                        <!-- /Subnavigation third level -->
                                    </li>
                                </ul>
                                <!-- /Subnavigation second level -->
                            </li>
                        </ul>
                        <!-- /Subnavigation first level -->
                    </li>

                    <li><a href="../portfolio-sidebar.html" title="Portfolio">Portfolio</a>
                        <!-- Subnavigation second level -->
                        <ul class="subnav">
                            <li><a href="../portfolio-1.html" title="One Column Portfolio">One Column Portfolio</a></li>
                            <li><a href="../portfolio-2.html" title="Two Columns Portfolio">Two Columns Portfolio</a></li>
                            <li><a href="../portfolio-3.html" title="Three Columns Portfolio">Three Columns Portfolio</a></li>
                            <li><a href="../portfolio-4.html" title="Portfolio Four Columns">Portfolio Four Columns</a></li>
                            <li class="last"><a href="../gallery.html" title="Gallery">Gallery</a></li>
                        </ul>
                        <!-- /Subnavigation second level -->
                    </li>

                    <li><a href="../blog.html" title="Blog">Blog</a>
                        <!-- Subnavigation second level -->
                        <ul class="subnav">
                            <li><a href="../blog-post.html" title="Blog Post">Blog Post</a></li>
                        </ul>
                        <!-- /Subnavigation second level -->
                    </li>

                    <li class="last"><a href="../contacts.html" title="Contacts">Contacts</a></li>
                </ul>
            </nav>
            <!-- /Header navigation -->
        </div>
        <!-- /Site navigation wrapper -->
    </header>
    <!-- /Header -->

    <!-- Page title and breadcrumbs -->
    <section id="page-title" class="clearfix">
        <div class="container_12">
            <!-- Title and page summary -->
            <hgroup id="title-text" class="grid_8">
                <h2>Typography</h2>
                <h3>Ummmmm typo typo typo.</h3>
            </hgroup>
            <!-- /Title and page summary -->

            <!-- Site search form -->
            <div id="title-search" class="grid_4">
                <form action="http://dbooom.com/themes/html/manifest/features/." id="site-search-form" class="inline alt-form">
                    <label>Search criteria</label>
                    <input type="search" name="seach_field" id="seachField" placeholder="Search criteria" />
                    <input type="submit" value="Search" />
                </form>
            </div>
            <!-- /Site search form -->

            <!-- Breadcrumbs -->
            <nav id="breadcrumbs" class="grid_12">
                <a href="index.html">Home</a> » Typography
            </nav>
            <!-- /Breadcrumbs -->
        </div>
    </section>
    <!-- /Page title and breadcrumbs -->

    <!-- Page body -->
    <div id="page-body" class="container_12 clearfix">
        <!-- Page content -->
        <article class="page-content grid_8">

            <!-- Headings -->
            <section>
                <h1>This is the heading one</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>

                <h2>This is the heading two</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>

                <h3>This is the heading three</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>

                <h4>This is the heading four</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>

                <h5>This is the heading five</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>

                <h6>This is the heading six</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>

                <hr />

                <!-- Content heading 1 -->
                <h3 class="ribbon-header">This is the content heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <!-- /Content heading 1 -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;h2 class="ribbon-header"&gt;Heading text&lt;/h2&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <hr />

                <!-- Heading underlined-header -->
                <h2 class="underlined-header">Underlined</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <!-- /Heading underlined-header -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;h2 class="underlined-header"&gt;Heading text&lt;/h2&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->
            </section>
            <!-- /Headings -->

            <hr />

            <!-- Lists -->
            <section>
                <h2 class="underlined-header">Lists</h2>

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;ul class="[class name]"&gt;
    &lt;li&gt;Items...&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <!-- List regular -->
                <div class="layout-1-2">
                    <h4>Circle list (.circle-list)</h4>
                    <ul class="circle-list">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Ut tincidunt, magna non sodales</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Dignissim at rhoncus gravida</li>
                        <li>Diam metus laoreet augue</li>
                    </ul>
                </div>
                <!-- /List regular -->

                <!-- List featured -->
                <div class="layout-1-2 layout-last">
                    <h4>Featured-list (.featured-list)</h4>
                    <ul class="featured-list">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Ut tincidunt, magna non sodales</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Dignissim at rhoncus gravida</li>
                        <li>Diam metus laoreet augue</li>
                    </ul>
                </div>
                <!-- /List featured -->

                <!-- List arrow -->
                <div class="layout-1-2">
                    <h4>Arrow list (.arrow-list)</h4>
                    <ul class="arrow-list">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Ut tincidunt, magna non sodales</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Dignissim at rhoncus gravida</li>
                        <li>Diam metus laoreet augue</li>
                    </ul>
                </div>
                <!-- /List arrow -->

                <!-- List check -->
                <div class="layout-1-2 layout-last">
                    <h4>Check list (.check-list)</h4>
                    <ul class="check-list">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Ut tincidunt, magna non sodales</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Dignissim at rhoncus gravida</li>
                        <li>Diam metus laoreet augue</li>
                    </ul>
                </div>
                <!-- /List check -->

                <!-- List ban -->
                <div class="layout-1-2">
                    <h4>Ban list (.ban-list)</h4>
                    <ul class="ban-list">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Ut tincidunt, magna non sodales</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Dignissim at rhoncus gravida</li>
                        <li>Diam metus laoreet augue</li>
                    </ul>
                </div>
                <!-- /List ban -->

                <!-- List info -->
                <div class="layout-1-2 layout-last">
                    <h4>Info list (.info-list)</h4>
                    <ul class="info-list">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Ut tincidunt, magna non sodales</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Dignissim at rhoncus gravida</li>
                        <li>Diam metus laoreet augue</li>
                    </ul>
                </div>
                <!-- /List info -->
            </section>
            <!-- /Lists -->

            <hr />

            <!-- Inline elements -->
            <section>
                <h2 class="underlined-header">Inline elements</h2>

                <p>Lorem ipsum dosectetur adipisicing <sup>This is sup element</sup> elit, sed do. Lorem ipsum <sub>This is sub element</sub> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut <del>This is del</del> enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem <dfn>dfn element here</dfn> ipsum dosectetur adipisicing elit, <strong>strong text</strong> sed do. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <mark>highlighted text by using "mark" tag or "highlight" class</mark> incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur <code>Some code text</code> adipisicing elit, <abbr title="The abbr tag styled like this">abbreviation</abbr> sed do.</p>

                <!-- Pre element -->
                <pre>&lt;div&gt;
    Preformatted text
&lt;/div&gt;</pre>
                <!-- /Pre element -->
            </section>
            <!-- /Inline elements -->

            <hr />

            <!-- Dropcap -->
            <section>
                <h2 class="underlined-header">Dropcap</h2>

                <p class="drop-cap">Uorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.</p>

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="drop-cap"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->
            </section>
            <!-- /Dropcap-->

            <hr />

            <!-- Prestyle texts -->
            <section>
                <h2 class="underlined-header">Prestyled texts</h2>

                <!-- Candy text 1 -->
                <p class="font-1">This is "candy text one" lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <!-- /Candy text 1 -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="font-1"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <br />

                <!-- Candy text 2 -->
                <p class="font-2">This is "candy text two" lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <!-- /Candy text 2 -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="font-2"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->
                
                <!-- Candy text 2 -->
                <p class="font-3">This is "candy text two" lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <!-- /Candy text 2 -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="font-3"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->
            </section>
            <!-- /Prestyle texts -->

            <hr />

            <!-- Text colors -->
            <section>
                <h2 class="underlined-header">Text colors</h2>

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="color-[name]"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <p class="color-maroon"><strong>Maroon</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-ponceau"><strong>Ponceau</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-orange"><strong>Orange</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-gamboge"><strong>Gamboge</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-lemon"><strong>Lemon</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-olive"><strong>Olive</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-teal"><strong>Teal</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-cerulean"><strong>Cerulean</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-denim"><strong>Denim</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-brown"><strong>Brown</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
                <p class="color-sepia"><strong>Sepia</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.</p>
            </section>
            <!-- /Text colors -->

            <!-- Text sizes -->
            <section>
                <h2 class="underlined-header">Text sizes</h2>

                <!-- Text x-small -->
                <p class="x-small"><strong>The "x-small" text</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.</p>
                <!-- /Text x-small -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="x-small"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <br />

                <!-- Text small -->
                <p class="small"><strong>The "small" text</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.</p>
                <!-- /Text small -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="small"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <br />

                <!-- Text regular -->
                <p><strong>Regular text</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.</p>
                <!-- /Text regular -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p&gt;Regular paragraph no additional class needed&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <br />

                <!-- Text large -->
                <p class="large"><strong>The "large" text</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.</p>
                <!-- /Text large -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="large"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <br />

                <!-- Text x-large -->
                <p class="x-large"><strong>The x-large text</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.</p>
                <!-- /Text x-large -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="x-large"&gt;Paragraph text&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->
            </section>
            <!-- /Text sizes -->

            <hr />

            <!-- Quotes -->
            <section>
                <h2 class="underlined-header">Quotes</h2>

                <!-- Regular blockquote -->
                <blockquote>
                    <p><strong>Regular blockquote</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.</p>
                    <cite>- Some guy</cite>
                </blockquote>
                <!-- /Regular blockquote -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;blockquote&gt;Regular quote&lt;/blockquote&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <br />

                <!-- Aligned left blockquote -->
                <blockquote class="align-left">
                    <p><strong>Aligned left blockquote</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </blockquote>
                <p>Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <!-- /Aligned left blockquote -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;blockquote class="align-left"&gt;Aligned left blockquote&lt;/blockquote&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <br />

                <!-- Aligned right blockquote -->
                <blockquote class="align-right">
                    <p><strong>Aligned right blockquote</strong>, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </blockquote>
                <p>Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <!-- /Aligned right blockquote -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;blockquote class="align-right"&gt;Aligned right blockquote&lt;/blockquote&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->
            </section>
            <!-- /Quotes -->

            <hr />

            <!-- Images -->
            <section>
                <h2 class="underlined-header">Images</h2>

                <!-- Aligned left image with zoom -->
                <a href="../assets/portfolio_1-5.jpg" class="img-holder align-left" rel="prettyPhoto">
                    <img src="../assets/portfolio_3-5.jpg" width="290" height="160" alt="Image example" />
                    <span class="caption">Aligned left image with caption and zoom</span>
                </a>
                <p>Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing </p>
                <!-- Aligned left image with zoom -->
        
                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;a class="img-holder align-left" rel="prettyPhoto"&gt;
    &lt;img href="..." alt="..." /&gt;
    &lt;span class="caption"&gt;Caption text&lt;/span&gt;
&lt;/a&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <hr />

                <!-- Aligned right image -->
                <a href="#" class="img-holder align-right">
                    <img src="../assets/portfolio_3-2.jpg" width="290" height="160" alt="Image example" />
                    <span class="caption">Aligned right image without zoom</span>
                </a>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <!-- /Aligned right image -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;a class="img-holder align-right"&gt;
    &lt;img href="..." alt="..." /&gt;
    &lt;span class="caption"&gt;Caption text&lt;/span&gt;
&lt;/a&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->

                <hr />

                <!-- Centered image -->
                <p class="align-center">
                    <a href="#" class="img-holder">
                        <img src="../assets/portfolio_3-9.jpg" alt="Image example" />
                        <span class="caption">Centered image with caption without zoom</span>
                    </a>
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                <!-- /Centered image -->

                <!-- Code -->
                <div class="toggle-block">
                    <div class="toggle-trigger"><a href="#">View code</a></div>
                    <div class="toggle-content">
                        <pre><code>&lt;p class="align-center"&gt;
    &lt;a href="..." class="img-holder"&gt;
        &lt;img src="..." alt="..." /&gt;
        &lt;span class="caption"&gt;Caption text&lt;/span&gt;
    &lt;/a&gt;
&lt;/p&gt;</code></pre>
                    </div>
                </div>
                <!-- /Code -->
            </section>
            <!-- /Images -->
        </article>
        <!-- /Page content -->

        <!-- Page sidebar -->
        <aside class="grid_4 sidebar">
            <!-- Widget category -->
            <nav class="widget-container widget-categories">
                <h2 class="widget-heading">Categories</h2>
                <div class="widget-content">
                    <ul>
                        <li>
                            <a href="#" title="Design category">Design</a>
                            <span class="widget-hint">136 Posts</span>
                        </li>
                        <li>
                            <a href="#" title="Coding category">Coding</a>
                            <span class="widget-hint">67 Posts</span>
                        </li>
                        <li>
                            <a href="#" title="Inspiration category">Inspiration</a>
                            <span class="widget-hint">61 Posts</span>
                        </li>
                        <li>
                            <a href="#" title="Project management category">Project management</a>
                            <span class="widget-hint">24 Posts</span>
                        </li>
                        <li>
                            <a href="#" title="FX's category">FX's</a>
                            <span class="widget-hint">16 Posts</span>
                        </li>
                    </ul>
                </div>
            </nav>
            <!-- /Widget category -->

            <!-- Widget newsletter -->
            <section class="widget-container widget-newsletter">
                <h2 class="widget-heading">Newsletter widget</h2>
                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <form action="http://dbooom.com/themes/html/manifest/features/." method="POST">
                        <input type="text" />
                        <input type="submit" value="Subscribe" />
                    </form>
                </div>
            </section>
            <!-- /Widget newsletter -->
        </aside>
        <!-- /Page sidebar -->
    </div>
    <!-- /Page body -->

    <!-- Bottom widgets -->
    <div id="bottom-widgets" class="clearfix">
        <div class="container_12 alt-widgets">
            <!-- Row -->
            <div class="grid_4">
                <section class="widget-container widget-tweets">
                    <h2 class="widget-heading">Recent tweets</h2>
                    <div class="widget-content"></div>
                </section>
            </div>
            <!-- /Row -->

            <!-- Row -->
            <div class="grid_4">
                <nav class="widget-container widget-recent-posts">
                    <h2 class="widget-heading">Recent posts</h2>
                    <div class="widget-content">
                        <ul>
                            <!-- Post item -->
                            <li>
                                <a href="../blog-post.html" class="img-holder round-3 align-left" title="Proceed to post">
                                    <img src="../assets/gallery_1.jpg" title="Post image" />
                                </a>
                                <a class="post-link" href="../blog-post.html" title="Euismod tincidunt ut laoreet dolore magna...">Euismod tincidunt ut laoreet dolore magna...</a>
                                <time class="post-created" datetime="2011-01-14T23:31:45+01:00">January 14, 2011</time>
                            </li>
                            <!-- /Post item -->

                            <!-- Post item -->
                            <li>
                                <a href="../blog-post.html" class="img-holder round-3 align-left" title="Proceed to post">
                                    <img src="../assets/gallery_2.jpg" title="Post image" />
                                </a>
                                <a class="post-link" href="../blog-post.html" title="Euismod tincidunt ut laoreet dolore magna...">Euismod tincidunt ut laoreet dolore magna...</a>
                                <time class="post-created" datetime="2011-01-14T23:31:45+01:00">January 14, 2011</time>
                            </li>
                            <!-- /Post item -->

                            <!-- Post item -->
                            <li>
                                <a href="../blog-post.html" class="img-holder round-3 align-left" title="Proceed to post">
                                    <img src="../assets/gallery_3.jpg" title="Post image" />
                                </a>
                                <a class="post-link" href="../blog-post.html" title="Euismod tincidunt ut laoreet dolore magna...">Euismod tincidunt ut laoreet dolore magna...</a>
                                <time class="post-created" datetime="2011-01-14T23:31:45+01:00">January 14, 2011</time>
                            </li>
                            <!-- /Post item -->
                        </ul>
                    </div>
                </nav>
            </div>
            <!-- /Row -->

            <!-- Row -->
            <div class="grid_4">
                <section class="widget-container widget-contact-form">
                    <h2 class="widget-heading">Contact form</h2>
                    <div class="widget-content">
                        <!-- Contact form -->
                        <form id="contact-form-widget" method="post" action="http://dbooom.com/themes/html/manifest/sendmail.php">
                            <p>
                                <label for="cf_name">Name <span class="required">(Required *)</span></label>
                                <input type="text" name="cf_name" id="cf_name" class="required" required />
                            </p>

                            <p>
                                <label for="cf_email">Email <span class="required">(Required *)</span></label>
                                <input type="email" name="cf_email" id="cf_email" class="required email" required />
                            </p>

                            <p>
                                <label for="cf_message">Message</label>
                                <textarea name="cf_message" id="cf_message" class="required" rows="5" required></textarea>
                            </p>

                            <p>
                                <input type="submit" value="Send message" />
                            </p>
                        </form>

                        <div class="form-sent"></div>
                        <!-- /Contact form -->
                    </div>
                </section>
            </div>
            <!-- /Row -->
        </div>
    </div>
    <!-- /Bottom widgets -->

    <!-- Footer -->
    <footer id="page-footer" class="container_12 clearfix footer-align">
        <!-- Footer credits -->
        <div class="grid_6 footer-info">
            <p>© Copyright 2011 <a href="http://dbooom.com/themes/html/manifest">Dbooom Themes</a> - All Rights Reserved</p>
        </div>
        <!-- /Footer credits -->

        <!-- Footer navigation -->
        <nav class="grid_6 footer-navigation">
            <ul>
                <li><a href="../index-2.html" title="Frontpage">Home</a></li>
                <li><a href="../blog.html" title="Blog">Blog</a></li>
                <li><a href="../portfolio-1.html" title="Portfolio">Portfolio</a></li>
                <li><a href="../contacts.html" title="Contact information">Contacts</a></li>
            </ul>
        </nav>
        <!-- /Footer navigation -->
    </footer>
    <!-- /Footer -->

    <!-- Scripts -->
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="../../../../../ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../scripts/jquery.min.js">\x3C/script>')</script>
    <script src="../scripts/jquery-ui.min.js"></script>
    <script src="../scripts/jquery.easing.1.3.js"></script>
    <script src="../scripts/plugins/nivo/jquery.nivo.slider.pack.js"></script>
    <script src="../scripts/plugins/prettyphoto/jquery.prettyPhoto.js"></script>
    <script src="../scripts/plugins/tipsy/jquery.tipsy.js"></script>
    <script src="../scripts/plugins/video-js/video.js"></script>
    <script src="../scripts/plugins/tweet/jquery.tweet.js"></script>
    <script src="../scripts/plugins/jquery-validate/jquery.validate.min.js"></script>
    <script src="../scripts/scripts.js"></script>

    <!--[if lt IE 9 ]>
    <script src="../scripts/plugins/PIE/PIE.js"></script>
    <script type="text/javascript">
        jQuery('.team-member-img, .team-member-img img, #pager li, #pager a, #pager span').each(function() {
            PIE.attach(this);
        });
    </script>
    <![endif]-->

</body>

<!-- Mirrored from dbooom.com/themes/html/manifest/features/typography.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 04 Apr 2011 01:52:51 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8"><!-- /Added by HTTrack -->
</html>